Hace unos días me preguntaban sobre una forma de dar estilo a caracteres especiales más conocidos como Unicode y es muy sencillo si utilizamos la etiqueta span de la que ya hablamos en otra ocasión.
Este carácter ► para mostrarlo tendríamos que escribir lo siguiente ►
Si utilizamos la etiqueta span de esta forma:
<span style="vertical-align: middle; color:#990000; font-size:20px;">►</span>
Tendríamos este resultado ►
Es tan sencillo como pensar el color y tamaño que deseamos darle, añadir los estilos y antes del cierre de la etiqueta span añadir el carácter que vamos a utilizar.
☀ ♬ ☎ ❁ ❧ ®
Impresionante lo que se puede hacer con solo código sin necesidad de subir imágenes y alentar la carga de una página web.
Gem@ en esta recta final te deseamos suerte en el concurso 20blogs y te apoyamos desde nuestra Web.
Enlace
Saludos!!!
:: N.G. - C.W. lo que es impresionante es la etiqueta span al contrario que ocurre con el div no añade márgenes o espacios muertos, es una etiqueta a la que se puede sacar mucha utilidad
:: descarga-gratis-libros.com muchas gracias, os estoy muy agradecida :)
Hola Gema, me alegra saludarte de nuevo, hace tiempo que no lo hacía.
Queria preguntarte una cosita, estoy "jugando" con este "truqui" y por más que le cambio el tamaño no consigo que el caracter me salga más grande ... que torpona soy ....
Un beso
Marga
:: Dónde lo tienes añadido Marga? si lo veo será más sencillo :)
:$ Lo siento Gema, no había caido ...
Lo he puesto en la última entrada que tengo editada, "La Trenza de Hojaldre"
Gracias!!!
Marga
Gemita... algun link con el detalle de los caracteres (codigo y su respectiva imagen)??????
Gracias!!
:: Marga eso que hicist eno está bien mandarme a ver esa trenza de hojaldre a esta hora y yo sin merendar jajajajaja
Verás hay una comilla que se ha colado dónde no debía, ha sido error mío, lo tienes así:
<span style="vertical-align: middle; color:#000000;" font-size:150px;>✿</span>
Esa comilla doble que hay después del color debe ir al final:
<span style="vertical-align: middle; color:#000000; font-size:150px;">✿</span>
Lamento mucho que perdieras en tiempo por mi error :(
:: Jaime en la misma entrada donde dice Unicode ;)
Jejeje... genial Gema.
Nunca se me habría ocurrido jugar con los colores y la fuente... me falta explotar mi creatividad :D
En Vagabundia JMiur hizo una buena recopilación y muchos ni los conocia... y si me permites Gema... le dejo a Jaime los enlaces:
Parte 1
Parte 2
Un abrazo.!
:: La imaginación es traviesa Felipe aparece cuando menos la esperamos :)
El sitio al que derivo a Jaime y que hay en la entrada es ese mismo de Vagabundia :D
Ya tá Gema !!!!!!!!!! :)
Hay que ver lo que hacen unas "comillas" jajaja
Gracias a tí por tu tiempo para los novatillos.
Besos,
Marga
Siempre muy atenta Gem@, y ahora un amigo mas, gracias Felipe, un abrazo desde Perú :D
No sabía cómo agrandar los caracteres, lo hacía con grande, más grande jajaja
Menos mal que estás ahí con los truquitos!
Besitos Juli :P
Hola GEM@!
muy interesante y util este truco,queria preguntarte porque no me sale en la pagina principal,solo en las entradas individuales me explico?
muchas gracias!
:: Estupendo Marga!!
:: Suerte Jaime ;)
:: Me encantan los truquitos Graciela y si funcionan más todavía :D
:: Te explicas divinamente Cocofansclub y no tengo respuesta porque debe salir en cualquier entrada que lo añadas :O
Si quieres prueba añadiendo los estilos en la plantilla de esta forma:
.unicode{
color: #990000;
vertical-align: middle;
font-size: 26px;
}
y en la entrada:
<span class="unicode">Aquí añadimos el carácter</span>
Perdon Gem@!!!pero el error fue mio lo habia puesto abajo de todo de la entrada,y no recorde que tengo el leer mas!!ahora si aparece en la entrada principal!!
muchisimas gracias y disculpas!!
:: No te preocupes Cocofansclub, es un detalle que vengas a contarlo :D
Excelente Gema! y si les agregas sombra parecera que los sacaste de photoshop jaja, yo usaré unos de números que encontré aquí:
http://www.alanwood.net/unicode/dingbats.html
ideales para los pasos :D
:: Genial idea Karla, he visto que eres una enamorada de las sombras igual que yo :D
Si, veo sombras por todos lados Gemita ♫ y no estoy loca, no estoy loca solo estoy :D esesperada
:: Habrá que mirase eso Karla así se empieza con la adicción al CSS :)
jaja, te imaginas Gema, ser tan adicta al CSS que se quiera hacer el ♥ con el:
body{
background:#FB0101 url(bed.gif);
background-repeat: repeat !important;
text-align: center;
}
.post{
margin: 0px;
display: inline;
}
.post-body img{
vertical align: middle;
float:none;
}
:D
:: Qué original Karla !!! :D
Nota: solo los miembros de este blog pueden publicar comentarios.